<template>
  <!-- https://vxetable.cn/#/demo/list -->
  <div class="table" :style="customStyle">
    <vxe-table border stripe height="100%" :column-config="{ resizable: true }" :row-config="{ isHover: true }"
      :scroll-y="{ enabled: true, gt: 0 }" :scroll-x="{ enabled: true, gt: 0 }" v-bind="$attrs">
      <template v-for="i in columns" :key="i.field">
        <ColumnItem :column="i">
          <template v-for="(_, name) in $slots" #[name]="scope">
            <slot :name="name" v-bind="scope" />
          </template>
        </ColumnItem>
      </template>
    </vxe-table>
  </div>
  <div class="page" v-if="isPage">
    <el-pagination style="margin-top: 5px;" v-model:current-page="compPage.page" v-model:page-size="compPage.pagesize"
      layout="sizes,total, prev, pager, next, jumper" :total="compPage.total" @current-change="handleChangeCurrent"
      @size-change="handleChangeSize" />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import ColumnItem from './columnItem.vue';
import domZIndex from 'dom-zindex'
domZIndex.setCurrent(1000)
const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  height: {
    type: String,
    default: '100px'
  },
  // 是否显示分页器
  isPage: {
    type: Boolean,
    default: true
  },
  page: {
    type: Object,
    default: () => {
      return {
        pagesize: 50,
        page: 1,
        total: 10
      };
    }
  },
})

const customStyle = computed(() => {
  return {
    height: `calc(100vh - ${props.height})`
  };
});
const emit = defineEmits(['change']);
const compPage = computed(() => {
  return Object.assign({ pagesize: 10, page: 1, total: 10 }, props.page);
});
const handleChangeCurrent = (val) => {
  compPage.value.page = val;
  emit('change', compPage.value);
};
const handleChangeSize = (val) => {
  compPage.value.pagesize = val;
  emit('change', compPage.value);
};
</script>

<style scoped lang="scss">
.table {
  --vxe-ui-table-row-hover-background-color: #d0e1fb;
  --vxe-ui-font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
}

.page {
  margin-top: 5px;
}
</style>
